<template>
  <div>
    <!-- 子路由header -->
    <header class="flex-center-between">
      <div class="l_title"></div>
      <a-button>保存</a-button>
    </header>
    <!-- 内容 -->
    <a-collapse accordion defaultActiveKey="" :bordered="false">
      <a-collapse-panel header="基本工资" key="1" style="position: relative">
        <a-row type="flex" class="box_content bg_gray" align="middle">
          <a-col :span="12">基本工资</a-col>
          <a-col :span="6">
            <span v-show="false" class="shff">税后发放</span>
          </a-col>
          <a-col :span="6" class="ta-right">
            <a-popover trigger="click" placement="leftTop" v-model="popover">
              <template slot="content">
                <a-row>
                  <a-button type="link" @click="addList">添加子项</a-button>
                </a-row>
                <a-row>
                  <a-button type="link" @click="editor">编辑</a-button>
                </a-row>
              </template>
              <a-button type="link">编辑</a-button>
            </a-popover>

            <span class="xt">系统</span></a-col
          >
        </a-row>
        <a-row
          v-for="(item, i) in data"
          :key="i"
          type="flex"
          class="box_content"
          align="middle"
          @mouseenter.native="index = i"
          @mouseleave.native="index = null"
        >
          <a-col :span="6">{{ item.name }}</a-col>
          <a-col :span="6">{{ item.remark }}</a-col>
          <a-col :span="6">
            <span class="shff" v-show="item.beforeTax"> 税后发放 </span>
          </a-col>
          <a-col :span="6" class="ta-right">
            <a-button v-show="index === i" type="link" @click="editor(item)"> 编辑 </a-button>
            <span class="xt">系统</span></a-col
          >
        </a-row>
      </a-collapse-panel>

      <a-collapse-panel header="岗位工资" key="2">
        <p>{{ text }}</p>
      </a-collapse-panel>

      <a-collapse-panel header="奖金" key="3">
        <a-table :scroll="{ y: 400 }" :pagination="false" :dataSource="data">
          <a-table-column :width="300" title="名称">
            <template slot-scope="text, record">
              {{ record.firstName }}
            </template>
          </a-table-column>
          <a-table-column :width="100">
            <template>
              <a-switch defaultChecked @change="onChange" />
            </template>
          </a-table-column>
          <a-table-column :width="100" title="操作">
            <template slot-scope="text">
              <a-button type="link" @click="editorMoney(text)">编辑</a-button>
            </template>
          </a-table-column>
          <!-- 第二列 -->
          <a-table-column :width="300" title="名称">
            <template slot-scope="text, record">
              {{ record.lastName }}
            </template>
          </a-table-column>
          <a-table-column :width="100">
            <template>
              <a-switch defaultChecked @change="onChange" />
            </template>
          </a-table-column>
          <a-table-column :width="100" title="操作">
            <template slot-scope="text">
              <a-button type="link" @click="editorMoney(text)">编辑</a-button>
            </template>
          </a-table-column>
        </a-table>
      </a-collapse-panel>
      <a-collapse-panel header="调整项" key="4">
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel header="成本项" key="5">
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel header="其他项" key="6">
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>
    <pay-editor @paySetCb="paySetCb($event)" :payOptions="payOptions"></pay-editor>
  </div>
</template>

<script>
import { Wages, PaySet } from "@/api/wages";

export default {
  inject: ["reload"],
  name: "PaySet",
  components: { payEditor: () => import("@/views/wages/common/pay_editor") },

  data() {
    return {
      addData: {
        beforeTax: false, // 是否税前发放
        enable: false /* 是否启用 */,
        name: "" /* 方案名称 */,
        nextMonthClear: false /* 是否次月清零 */,
        remark: "" /* 备注 */,
        salaryPlanFormulaAddDTOList: [] /* 计算公式及条件 */,
        systemProperty: false /* 是否是系统字段 */,
        type: 1 /* 工资方案所属类别 1、基本工资 2、岗位工资 3、奖金项 4、调整项 5、成本项 6、其它项 */
      },
      data: [],
      popover: false,
      index: null,
      payOptions: {},
      text: `test`
    };
  },
  created() {
    /* 获取工资设置 */
    this.getPaySet();
  },

  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {};
    }
  },
  methods: {
    /* 新增工资设置回调 */
    paySetCb(data) {
      if (data.id) {
        Wages({ url: PaySet.putPaySet, method: "PUT", data });
      } else {
        Wages({ url: PaySet.addPaySet, method: "POST", data });
      }
      this.getPaySet();
    },

    /* 获取工资设置表 */
    getPaySet() {
      Wages({ url: PaySet.paySetList }).then(({ data }) => {
        if (data.entities.length) this.data = data.entities;
      });
    },
    /* switch */
    onChange(checked) {},
    // 选择每一个item
    handleClick(e) {},
    titleClick(e) {},
    /* 添加子项 */
    addList() {
      this.popover = false;
      this.payOptions = {
        show: true,
        obj: {
          title: "添加子项",
          name: "名称",
          remark: "备注",
          type: 1,
          addData: this.addData
        }
      };
    },
    // 编辑
    editor(addData) {
      this.popover = false;
      this.payOptions = {
        show: true,
        obj: {
          title: "编辑",
          name: "名称",
          addData
        }
      };
    },
    /* 编辑奖金 */
    editorMoney(text) {}
  }
};
</script>
<style lang="scss" scoped>
header {
  height: 100px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 10px;
  .l_title {
    color: rgba(51, 51, 51, 1);
    font-size: 20px;
  }
}

.box_content {
  height: 48px;
  line-height: 48px;
  padding: 0 12px 0 24px;
  &:hover {
    background: #fafafa;
  }
}
.xt {
  padding: 4px;
  color: #d9d9d9;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 12px;
}
.shff {
  padding: 4px;
  color: #fff;
  background: #ccc;
  border-radius: 8px;
  font-size: 12px;
}
.emplis {
  position: absolute;
  right: 0;
  top: 10px;
}
</style>
